<template>
  <CompOperate
    :field="field"
    :designer="designer"
    :design-state="designState"
    :parent-list="parentList"
    :parent-widget="parentWidget"
    :sub-form-row-id="subFormRowId"
    :sub-form-row-index="subFormRowIndex"
    :sub-form-col-index="subFormColIndex"
    :index-of-parent-list="indexOfParentList"
    :display-style="field['options'].displayStyle"
  >
    <div class="scene-DRC-info4-widget" :style="getStyle('area')">
      <div class="header-wrp">
        <div class="logo-wrp flex-row align-center">
          <img
            class="logo"
            v-if="logoUrl"
            referrerpolicy="no-referrer"
            :src="logoUrl"
          />
        </div>
        <div class="time-wrp">
          <div class="time">
            <span class="value">{{ timeInfo.time }}</span>
          </div>
        </div>
      </div>
      <!--科室-->
      <div class="dept">
        <ScrollX>
          {{ getRoomDeptInfo[optionsInfo["roomNameKey"]] || "\u00a0" }}
        </ScrollX>
      </div>

      <!--医生信息-->
      <template v-for="item in getRoomDoctorInfo">
        <div class="doctor-info-wrp" :key="item.workerId">
          <div class="doctor-info">
            <div class="left-avatar">
              <img
                :src="getDoctorPicture(item)"
                alt="医生"
                @error="handleError"
              />
            </div>
            <div class="right-info">
              <div class="name">
                <ScrollX align="left">{{
                  item.workerName || "\u00a0"
                }}</ScrollX>
              </div>
              <div class="degree">
                <span class="label-btn">职称</span>
                <div class="container">
                  <ScrollX align="left">{{
                    item.workerTitle || "\u00a0"
                  }}</ScrollX>
                </div>
              </div>
              <div class="doctor-connect">
                <!-- 滚动组件，如果需要给滚动组件文字添加样式，添加到container的div上即可 -->
                <span class="label-btn">简介</span>
                <div class="container" style="height: 150px">
                  <!-- 组件接受两个参数，content：滚动的文字内容；pageDuration滚动一页需要的时间 -->
                  <ScrollY :speed="10">{{ item.workerIntro }}</ScrollY>
                </div>
              </div>
            </div>
          </div>
          <div class="schale-wrp">
            <div class="schale-title">坐诊信息</div>
            <div class="schale-main">
              <div class="schale-date">
                <div class="schale-date-first bg-line">
                  <div class="right">日期</div>
                  <div class="left">时间</div>
                </div>
                <div
                  class="schale-date-item"
                  v-for="(ele, idx) in weekDateList"
                  :key="idx"
                >
                  <div class="week">{{ ele.week }}</div>
                  <!-- <div class="date">{{ ele.date }}</div> -->
                </div>
              </div>
              <div
                class="schale-line"
                v-for="(ele2, noIndex) in noonVOList(item)"
                :key="ele2.noonId"
              >
                <div class="schale-date-first">
                  <div class="right">{{ ele2.noonName }}</div>
                  <div class="left">
                    {{ ele2.startTime
                    }}<span v-if="ele2.startTime && ele2.endTime">-</span
                    >{{ ele2.endTime }}
                  </div>
                </div>
                <div
                  class="schale-date-item"
                  v-for="(ele, idx) in scheduleList(item)"
                  :key="idx"
                >
                  <div class="choose">
                    <i
                      class="el-icon-check"
                      v-if="showChoose(ele.noonIds, noIndex, item)"
                    ></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="schale-tip" :style="getStyle('zzTip')">
              <scrollX  >{{ optionsInfo.zzTip || "" }}</scrollX>
            </div>
          </div>
          <!--患者信息-->
          <div class="patient-info">
            <div class="item-sec current-patient">
              <div class="title">
                {{ optionsInfo["currentPatientContent"] || "当前患者" }}
              </div>
              <div
                class="content"
                :class="{ 'current-patient-info': scrollInfo(item) }"
              >
                <div class="scroll-info">
                  <template
                    v-for="(PatientItem, index) in item.treatingPatient"
                  >
                    <p class="item" :key="index">
                      {{ PatientItem.patientName || "&nbsp;" }}
                      <span class="order-no" v-if="PatientItem.orderNo"
                        >({{ PatientItem.orderNo || "&nbsp;" }})</span
                      >
                    </p>
                  </template>
                </div>
              </div>
            </div>

            <div
              class="item-sec wait-patient"
              :class="getPatientClassName('wait-patient', item)"
            >
              <div class="title">
                {{ optionsInfo["waitingPatientContent"] || "等候患者" }}
              </div>
              <template>
                <div class="content">
                  <vue-seamless-scroll
                    class="scroll"
                    :ref="`scroll-${item.workerId}`"
                    @ScrollEnd="(e) => handleScrollEnd(e, item)"
                    :class-option="optionScroll"
                    :data="getWaitingPatientList(item.waitingPatientList)"
                  >
                    <div class="scroll-info-wait">
                      <p
                        v-for="(item2, index) in getWaitingPatientList(
                          item.waitingPatientList
                        )"
                        :key="`${item2.patientIdNo}-${index}`"
                      >
                        {{ item2.patientName || "&nbsp;" }}
                        <span v-if="item2.orderNo"
                          >({{ item2.orderNo || "&nbsp;" }})</span
                        >
                      </p>
                    </div>
                  </vue-seamless-scroll>
                </div>
              </template>
            </div>
          </div>
        </div>
      </template>
      <div class="bottom-wrp">
        <div
          class="picture"
          v-if="optionsInfo?.hospitalCode && optionsInfo?.hospitalCode[0]?.url"
        >
          <img :src="optionsInfo?.hospitalCode[0]?.url" alt="互联网" />
        </div>
        <div class="text" :style="getStyle('bottomTip')">
          <p :style="getStyle('bottomTip')">{{ optionsInfo.bottomTipText1 }}</p>
          <p :style="getStyle('bottomTip')">{{ optionsInfo.bottomTipText2 }}</p>
        </div>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import { pxToVw } from "@/utils/common";
import emitter from "@/utils/designer/emitter";
import { NoticeBar, Swipe, SwipeItem } from "vant";
import { buildParentApi } from "@/utils/designer/util";
import vueSeamlessScroll from "vue-seamless-scroll";
import ScrollX from "@c/public/scroll/scrollX.vue";
import ScrollY from "@c/public/scroll/scrollY.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import { v4 as uuid } from "uuid";
import dayjs from "dayjs";

let buildParent = buildParentApi();
export default {
  name: "scene-DRC-nx-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    CompOperate,
    NoticeBar,
    Swipe,
    SwipeItem,
    ScrollY,
    ScrollX,
    vueSeamlessScroll,
  },

  props: {
    widget: Object,
    devType: {
      type: Boolean,
      default: false,
    },
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },
    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi(),
    },
  },

  data() {
    return {
      states: true,
      widgetKey: uuid(),
      currKey: uuid(),
      optionsInfo: Object(),
      header: require("@a/images/design/header.jpeg"),
      pause: require("@a/images/design/pause.png"),
      code1: require("@a/images/design/placeholder-code.png"),
      headerInfo: {
        date: "2025-08-04",
        time: "10:00",
        week: "星期一",
        timestamp: (new Date().getTime() / 1000).toFixed(0),
      },
      apiTimeInfo: null,
    };
  },

  computed: {
    timeInfo() {
      if (this.apiTimeInfo) {
        return this.apiTimeInfo;
      } else {
        let time = {
          date: dayjs().format("YYYY-MM-DD"),
          time: dayjs().format("HH:mm"),
          week: dayjs().format("dddd"),
          timestamp: (new Date().getTime() / 1000).toFixed(0),
        };
        return time;
      }
    },
    weekDateList() {
      const labels = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
      const today = dayjs();
      const dow = today.day(); // 0-6, 周日=0
      const offset = dow === 0 ? 6 : dow - 1; // 周一作为起始
      const start = today.subtract(offset, "day");
      return Array.from({ length: 7 }, (_, i) => {
        const d = start.add(i, "day");
        return { week: labels[i], date: d.format("MM-DD") };
      });
    },
    noonVOList() {
      return function (item) {
        const fallback = [
          { noonName: "上午", noonId: "1", startTime: "", endTime: "" },
          { noonName: "下午", noonId: "2", startTime: "", endTime: "" },
        ];

        if (
          !item ||
          !Array.isArray(item.scheduleList) ||
          item.scheduleList.length === 0
        ) {
          return fallback;
        }

        // 聚合所有排班中的时段，按 noonId 去重
        const map = new Map();
        item.scheduleList.forEach((s) => {
          (s.noonVOList || []).forEach((n) => {
            if (!map.has(String(n.noonId))) {
              map.set(String(n.noonId), {
                noonId: String(n.noonId),
                noonName: n.noonName,
                startTime: n.startTime,
                endTime: n.endTime,
              });
            }
          });
        });

        const list = Array.from(map.values());

        // 按上午在前下午在后的顺序排序
        const sortedList = list.sort((a, b) => {
          // 如果包含"上午"或"下午"关键词，按关键词排序
          if (a.noonName.includes("上午") && b.noonName.includes("下午")) {
            return -1;
          }
          if (a.noonName.includes("下午") && b.noonName.includes("上午")) {
            return 1;
          }
          // 如果按noonId排序（1=上午，2=下午）
          const aId = parseInt(a.noonId);
          const bId = parseInt(b.noonId);
          if (aId === 1 && bId === 2) return -1;
          if (aId === 2 && bId === 1) return 1;
          // 其他情况保持原有顺序
          return aId - bId;
        });

        return sortedList.length > 0 ? sortedList : fallback;
      };
    },
    showChoose() {
      return function (noonIds, noIndex, item) {
        console.log(
          noonIds,
          noIndex,
          item,
          "noonIds, noonVOList, noIndex,item"
        );
        if (!noonIds) return false;

        // 兼容字符串或数组
        const ids = Array.isArray(noonIds)
          ? noonIds.map((v) => String(v))
          : String(noonIds)
              .split(",")
              .map((v) => v.trim())
              .filter(Boolean);
        console.log(this.noonVOList, "this.noonVOList");
        const current =
          Array.isArray(this.noonVOList(item)) && this.noonVOList(item)[noIndex]
            ? String(this.noonVOList(item)[noIndex].noonId)
            : undefined;

        if (!current) return false;

        return ids.includes(current) && item.workerId;
      };
    },
    scheduleList() {
      return function (item) {
        let list = this.weekDateList;
        list.forEach((ele, idx) => {
          item.scheduleList &&
            item.scheduleList.forEach((ele2, idx2) => {
              if (idx === Number(ele2.week)) {
                ele.noonIds = ele2.noonIds;
                ele.noonVOList = ele2.noonVOList;
              }
            });
        });
        console.log(list);
        return list;
      };
    },
    logoUrl() {
      if (this.optionsInfo.logoUrl) {
        return this.optionsInfo.logoUrl?.val?.url;
      } else {
        return "";
      }
    },
    // 候诊列表等待--滚动设置
    optionScroll() {
      let { openScroll, waitPatientScrollNumber, waitPatientStep } =
        this.optionsInfo;
      return {
        hoverStop: true,
        direction: 1, // 0向下 1向上 2向左 3向右
        isSingleRemUnit: true,
        step: [1, 1.5, 2, 2.5, 3][waitPatientStep - 1], // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
      };
    },

    optionScroll2() {
      let { waitPatientStep } = this.optionsInfo;
      return {
        hoverStop: true,
        direction: 1, // 0向下 1向上 2向左 3向右
        isSingleRemUnit: true,
        step: [1, 1.5, 2, 2.5, 3][waitPatientStep - 1], // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
      };
    },

    // 判断候诊模式
    waitPatientTypeInfo() {
      let { waitPatientType = 1 } = this.optionsInfo;
      return waitPatientType;
    },

    // 判断当前患者是否滚动
    scrollInfo() {
      return function (info) {
        return !!info.treatingPatient && info.treatingPatient.length > 1;
      };
    },

    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = self.optionsInfo || Array();
        let Obj = Object();
        switch (val) {
          case "area":
            Reflect.set(Obj, "height", pxToVw(info.areaHeight));
            Reflect.set(Obj, "backgroundColor", `${info.backgroundColor}`);
            return Obj;
          case "zzTip":
            Reflect.set(Obj, "fontSize", pxToVw(info.zzTipFontSize));
            Reflect.set(Obj, "color", info.zzTipFontColor);
            return Obj;
          case "bottomTip":
            Reflect.set(Obj, "fontSize", pxToVw(info.bottomTipFontSize));
            Reflect.set(Obj, "color", info.bottomTipColor);
            return Obj;
          case "currentFontSize":
            Reflect.set(Obj, "fontSize", pxToVw(info.currentFontSize));
            return Obj;
          case "picture":
            Reflect.set(Obj, "height", pxToVw(info.imageHeight));
            Reflect.set(Obj, "width", pxToVw(info.imageWidth));
            Reflect.set(Obj, "borderRadius", pxToVw(info.imageRadius));
            return Obj;
          case "doctorName":
            Reflect.set(Obj, "fontWeight", info.doctorFontWeight || "normal");
            return Obj;
        }
      };
    },

    // 获取医生头像
    getDoctorPicture() {
      return function (row) {
        let isPause = row?.isPause;
        let header = "/tpleditor/resource/assets/images/header.png";
        if (!isPause) {
          return row?.workerPicture || header;
        } else {
          return this.pause;
        }
      };
    },

    getDeptHideClassName() {
      let { checkList, deptRoomPosition } = this.optionsInfo;
      if (checkList && checkList.length === 1 && checkList[0] === 3) {
        return "dept-room-hideDept";
      } else {
        if (deptRoomPosition) {
          return "dept-room-position";
        }
      }
    },

    // 诊室等待--设置不同模式下的等待患者样式
    getPatientClassName() {
      let { waitMode, waitingPatientHide } = this.optionsInfo;
      return function (type, row) {
        let waitLen = row?.waitingPatientList?.length || 1;
        if (!waitingPatientHide) {
          switch (type) {
            case "current-patient":
              return parseInt(waitMode) !== 1
                ? "current-patient"
                : "current-patient2";
            case "wait-patient":
              switch (waitMode) {
                case 1:
                  return "wait-patient";
                case 2:
                  return "wait-patient2";
                case 3:
                  return "wait-patient3";
                case 4:
                  return "wait-patient4";
              }
          }
        } else {
          return "hide-waiting-patient";
        }
      };
    },

    // 候诊等待
    getWaitPatientNumber() {
      return function (row, scroll) {
        let waitingPatientList = this.getWaitingPatientList(row);
        if (scroll) {
          if (Array.isArray(waitingPatientList)) {
            return `scroll-area-${waitingPatientList.length}`;
          } else {
            return `scroll-area`;
          }
        } else {
          if (Array.isArray(waitingPatientList)) {
            if (waitingPatientList.length >= 4) {
              return `no-scroll-area-4`;
            } else {
              return `no-scroll-area-${waitingPatientList.length}`;
            }
          } else {
            return `no-scroll-area`;
          }
        }
      };
    },

    // 获取全量医患信息
    getRoomDoctorInfo() {
      let devType = this.devType;
      let roomDoctorInfo = this.$store.getters["getRoomDoctorInfo"];
      let list = devType ? roomDoctorInfo.apiData : roomDoctorInfo.mockData;
      if (!!list?.length) {
        return list.slice(0, 1);
      } else {
        return [{}];
      }
    },

    // 获取科室信息
    getRoomDeptInfo() {
      let devType = this.devType;
      let roomDoctorInfo = this.$store.getters["getRoomDeptInfo"];
      if (devType) {
        return roomDoctorInfo.apiData;
      } else {
        return roomDoctorInfo.mockData;
      }
    },

    // 科室可能因为医生是否登录会有差异
    getRoomDiffInfo() {
      let list = this.getRoomDoctorInfo;
      let deptInfo = this.getRoomDeptInfo;
      if (list?.length) {
        return list[0].deptName || deptInfo?.deptName || "\u00a0";
      } else {
        return deptInfo?.deptName || "\u00a0";
      }
    },

    // 候诊患者截取
    getWaitingPatientList() {
      return function (row) {
        let { waitPatientType, waitMode, waitPatientNumber } = this.optionsInfo;
        switch (waitPatientType) {
          case 1:
            return !!row && !!row?.length ? row.slice(0, waitMode) : [];
          case 2:
            return !!row && !!row?.length
              ? row.slice(0, waitPatientNumber)
              : [];
        }
      };
    },
  },

  created() {
    this.registerToRefList();
    this.initEventHandler();
    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    // 接收父组件传递过来的数据
    executeMethod(key, data) {
      switch (key) {
        case "setDate":
          this.apiTimeInfo = JSON.parse(data);

          break;
        case "roomDeptInfo":
          this.states = true;
          buildParent.executeParentMethod(
            "writeLog",
            JSON.stringify({
              sign: "模板日志-科室信息",
              key: key,
              data: data,
            })
          );
          this.$store.dispatch("setRoomDeptInfo", data);
          break;
        case "roomDoctorInfo":
          this.states = true;
          buildParent.executeParentMethod(
            "writeLog",
            JSON.stringify({
              sign: "模板日志-医生信息",
              key: key,
              data: data,
            })
          );
          console.log(this.$lodash.cloneDeep(data));
          this.$store.dispatch(
            "setRoomDoctorInfo",
            this.$lodash.cloneDeep(data)
          );
          break;
      }
    },

    // 滚动结束
    handleScrollEnd(e, mode) {
      if (mode == "curr") {
        this.currKey = uuid();
      } else {
        this.widgetKey = uuid();
      }
    },

    handleError(event) {
      const loadedImg = event.target;
      this.states = false;
    },
  },

  watch: {
    field: {
      handler: function (val) {
        const self = this;
        self.$nextTick(() => {
          self.widgetKey = uuid();
          let key = val.options.config;
          self.optionsInfo = val.options[key];
        });
      },
      deep: true,
      immediate: true,
    },
  },

  destroyed() {
    this.unregisterFromRefList();
  },
};
</script>

<style lang="scss" scoped>
.scene-DRC-info4-widget {
  padding: 28px 0;
  box-sizing: border-box;
  flex: inherit;
  flex-direction: column;
  justify-content: space-between;
  color: #333;
  height: 150px;
  padding: 25px;
  font-size: 40px;
  box-sizing: border-box;
  background: transparent;
  background-image: url("~@/components/assets/images/design/drc-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  .header-wrp {
    height: 220px;
    display: flex;
    align-items: center;
    .logo-wrp {
      flex: 1;
      max-width: 690px;
      max-height: 195px;
      overflow: hidden;
      .logo {
        max-width: 100%;
        max-height: 100%;
      }
    }
    .time-wrp {
      width: 326px;
      display: flex;
      align-items: center;
      justify-content: center;
      .time {
        width: 326px;
        height: 100px;
        background: #000000;
        border-radius: 50px;
        font-weight: 400;
        font-size: 56px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  //科室
  .dept {
    //width: 98%;
    box-sizing: border-box;
    margin-top: 30px;
    height: 240px;
    background: rgba(0, 0, 0, 0.79);
    border-radius: 50px;
    color: white;
    font-size: 160px;
  }

  // 诊室号/诊室
  .room {
    width: calc(94%);
    font-size: 160px;
    color: white;
    height: 190px;
    margin-top: 24px;
    padding-bottom: 10px;
    border-bottom: 2px solid white;
    box-sizing: border-box;
    margin-left: auto; /* 新增 */
    margin-right: auto; /* 新增 */
  }
  .doctor-info-wrp {
    padding: 29px 25px 0 25px;
  }
  // 医生相关信息
  .doctor-info {
    height: 366px;
    min-width: auto;
    display: flex;
    overflow: hidden;
    .left-avatar {
      width: 270px;
      height: 365px;
      overflow: hidden;
      flex-shrink: 0;
      margin-right: 25px;
      img {
        width: 100%;
        max-height: 100%;
        object-fit: cover;
      }
    }
    .right-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      flex: 1;
      .label-btn {
        flex-shrink: 0;
        width: 104px;
        height: 52px;
        background: linear-gradient(180deg, #2cdff2 0%, #09cbea 100%), #d8d8d8;
        border-radius: 5px;
        color: #021a21;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .name {
      font-weight: 400;
      font-size: 100px;
      color: #ffffff;
      line-height: 100px;
      text-align: left;
      overflow: hidden;
      padding-bottom: 25px;
    }
    .degree {
      display: flex;
      font-weight: 500;
      font-size: 40px;
      color: #ffffff;
      line-height: 60px;
      padding-bottom: 25px;
      overflow: hidden;
      .label-btn {
        margin-right: 10px;
      }
      .container {
        flex: 1;
        overflow: hidden;
      }
    }
    .doctor-connect {
      overflow: hidden;
      flex: 1;
      overflow: hidden;
      display: flex;
      font-weight: 400;
      font-size: 40px;
      color: #ffffff;
      line-height: 60px;
      .label-btn {
        margin-right: 10px;
      }
      .container {
        flex: 1;
        overflow: hidden;
      }
    }
  }
  .schale-wrp {
    margin-top: 30px;

    height: 369px;
    background: rgba(10, 125, 158, 0.54);
    border-radius: 20px;
    border: none;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 3px;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 20px;
      pointer-events: none;
      border: 4px solid rgba(29, 196, 221, 1);
    }
    .schale-title {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 60px;
      color: #203355;
      height: 104px;
      background: linear-gradient(
        180deg,
        rgba(44, 223, 242, 0.5) 0%,
        rgba(9, 203, 234, 0.5) 100%
      );
      border-radius: 20px 20px 0px 0px;
    }
    .schale-main {
      flex: 1;
      padding: 0 1px 3px 3px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .schale-tip {
      margin: 0 8px 3px 8px;
      height: 39px;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 10px;
      text-align: center;
      border-radius: 20px;
      overflow: hidden;
    }
    .schale-date {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 24px;
      height: 70px;
      margin: 3px;

      color: #ffffff;
      .schale-date-first {
        height: 100%;
        width: 182px;
        flex-shrink: 0;
        box-sizing: border-box;
        background: rgba(32, 51, 85, 0.5);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 15px 10px;
        margin-right: 3px;
        background-image: url("~@/components/assets/images/design/xiexian.png");
        background-size: 100% 100%;
        .right {
          text-align: right;
        }
        .left {
          text-align: left;
        }
      }
      .bg-line {
        position: relative;
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
      .schale-date-item {
        height: 100%;
        flex: 1;
        background: rgba(32, 51, 85, 0.5);
        margin-right: 3px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .week {
          margin-top: 5px;
        }
        .date {
          line-height: 35px;
        }
      }
    }
    .schale-line {
      flex: 1;
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 24px;
      height: 70px;
      margin: 3px;
      color: #ffffff;
      &:last-of-type {
        margin-top: 0;
        border-radius: 0 0 20px 20px;
        overflow: hidden;
      }
      .schale-date-first {
        height: 100%;
        width: 182px;
        flex-shrink: 0;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.3);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #203355;
        padding: 15px 10px;
        margin-right: 3px;
        .right {
          text-align: right;
          line-height: 34px;
        }
        .left {
          text-align: left;
          list-style: 34px;
        }
      }
      .schale-date-item {
        height: 100%;
        flex: 1;
        background: rgba(255, 255, 255, 0.3);
        margin-right: 3px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .choose {
          font-size: 45px;
          color: rgba(253, 255, 0, 1);
        }
      }
    }
  }
  // 患者信息
  .patient-info {
    padding-top: 40px;
    .item-sec {
      display: flex;
      overflow: hidden;
      height: 150px;
      background: linear-gradient(
        180deg,
        rgba(44, 223, 242, 0.8) 0%,
        rgba(9, 203, 234, 0.8) 100%
      );
      border-radius: 20px;
      margin-bottom: 25px;
      .title {
        flex-shrink: 0;
        width: 337px;
        color: #203355;
        height: 150px;
        background: linear-gradient(180deg, #00fcff 1%, #04e5e6 100%);
        border-radius: 20px 0px 0px 20px;
        flex: inherit;
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: center;
        font-size: 60px;
      }

      .content {
        flex: 1;
        height: 150px;
        display: flex;
        flex-direction: column;
        align-self: center;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        overflow: hidden;
        color: #ffffff;
        font-size: 80px;
        padding: 0 15px;
        box-sizing: border-box;

        p {
          width: 100%;
          line-height: 150px;
          font-size: 80px;
          text-align: center;
          @include singleEllipsis(100%);
        }
        .scroll {
          width: 100%;
          overflow: hidden;
          box-sizing: border-box;
        }
        .scroll-info-wait {
          width: 100%;
          overflow: hidden;
          box-sizing: border-box;
        }
      }
      .current-patient-info {
        flex: 1;
        height: 100%;
        display: flex;
        align-self: center;
        align-items: center;
        font-size: 80px;
        .scroll-info {
          width: 100%;
          overflow: hidden;
          box-sizing: border-box;

          p {
            height: 100%;
            width: 100%;
            display: flex;
            line-height: 150px;
            font-size: 80px;
            @include singleEllipsis(100%);
          }
        }
      }

      .scroll-area-all {
        align-items: start;
        align-self: auto;
      }
    }
  }
  .bottom-wrp {
    position: relative;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #3ffafe 0%, #04e5e6 100%),
      linear-gradient(90deg, #2cdff2 0%, #09cbea 100%);

    .picture {
      flex-shrink: 0;
      width: 150px;
      height: 150px;
      background: #ffffff;
      border-radius: 10px;
      overflow: hidden;
      margin-top: 21px;
      margin-left: 21px;
      img {
        width: 100%;
        max-height: 100%;
      }
    }
  }
  .text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    p {
      text-align: center;
      line-height: 70px;
      font-weight: 500;
      font-size: 56px;
      color: #fdff00;
    }
  }
}
</style>

